<!--
 * @Author: jinye.zhang
 * @Version: 1.0.0
 * @Date: 2021-09-08 09:47:28
 * @LastEditors: jinye.zhang
 * @LastEditTime: 2021-09-08 16:04:06
 * @Description: 钱包
-->
<template>
  <view class="wallet-container">
    <!-- 提现申请列表 -->

    <view class="cash-tip">
      提现金额由支付宝账号：云账户（天津）共享经济信息咨询有限公司支付，请进入支付宝查看!
    </view>

    <view class="bill-logs-container">
      <view v-if="fundList && fundList.length > 0" class="bill-content">
        <view
          v-for="item in fundList"
          :key="item.id"
          class="bill-list-item default-box-shadow">
          <view class="bill-list-content">
            <view class="title">{{ item.year }}年{{ item.month }}月记录</view>
            <block  v-if="item.payment === 'alipay'">
              <view class="date">
                支付宝账号：<text>{{ item.alipay_accout }}</text>
              </view>
              <view class="date">
                支付宝名称：<text>{{ item.real_name }}</text>
              </view>
            </block>
            <block v-else>
              <view class="date">
                银行卡账号：<text>{{ item.alipay_accout }}</text>
              </view>
              <view class="date">
                姓名：<text>{{ item.real_name }}</text>
              </view>
            </block>
            <view class="date" style="margin-bottom: 0">
              申请时间：<text>{{ item.created_at }}</text>
            </view>
            <view v-if="item.status === 3" class="date">
              返还金额：
              <text>{{ item.cash }}</text>
            </view>
            <view v-if="item.remark" class="date" style="margin-bottom: 0">
              附言信息：
              <text>{{ item.remark }}</text>
            </view>
          </view>
          <view class="bill-list-cash">
            <text class="bill-list-cash-symbol">¥</text>
            <text>{{ item.cash }}</text>
          </view>
          <view class="cash-icon">
            <text v-if="item.status === 0">申请中</text>
            <text v-else-if="item.status === 1">已打款</text>
            <text v-else-if="item.status === 2">异常</text>
            <text v-else-if="item.status === 3">驳回</text>
          </view>
        </view>
      </view>
      <view v-else class="empty">
        <image
          style="width: 350rpx;height: 350rpx;"
          src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"
          mode="scaleToFill"
        />
        <view class="empty-tips">
          <text>~还没有提现记录哦~~</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import { getUserInfoById } from '@/api/user';
  import Title from '@/components/title/title';
  import { withdrawSetInfoByApplet, userFundList } from '@/api/financialManagement';
  import { mapGetters } from 'vuex';
  import { parseTime } from '@/utils/parseTime';
  export default {
    components: {
      Title,
    },
    data() {
      return {
        name: 'wallet',
        cashAmountData: null,
        device_withdraw_date: null,
        fundList: [],
        nexDateStr: '',
        userAlipayInfo: {
          id: null,
          real_name: null,
          alipay_accout: null,
        }
      }
    },
    computed: {
      ...mapGetters([
        'version',
        'userStatistics',
        'userInfo'
      ]),
    },
    onShow() {
      this.getUserFundList();
    },
    methods: {

      //获取用户提现申请列表
      getUserFundList() {
        userFundList().then(result => {
          if (result && result.code === 200) {
            let data = result.data.records;
            data.forEach(item => {
              item.year = new Date(item.created_at).getFullYear();
              item.month = new Date(item.created_at).getMonth() + 1;
              item.created_at = parseTime(new Date(item.created_at), '{y}-{m}-{d} {h}:{i}:{s}');
            })
            this.fundList = data;
          }
        })
      }
    },
    onShareAppMessage() {
      console.log('分享');
    },
  }
</script>

<style lang="scss">
  page{
    background-color: #f8f8f8;
  }

  .wallet-container{
    padding: 32rpx;
  }

  .cash-tip{
    border-radius: 16rpx;
    background: $uni-color-primary;
    color: #fff;
    padding: 32rpx 24rpx;
  }

  .bill-logs-container{
    padding: 24rpx 0;
    .bill-list-item{
      padding: 36rpx 24rpx 36rpx 0;
      background: #fff;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      position: relative;
      display: flex;
      align-items: center;
      .bill-icon{
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        background: $uni-color-primary;
        text-align: center;
        position: relative;
      }
      .bill-icon-image{
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
      }
      .bill-list-content{
        flex: 1;
        padding-left: 24rpx;
        .title{
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 24rpx;
        }
        .date{
          font-size: 24rpx;
          color: #888;
          margin-bottom: 6rpx;
        }
        .status{
          padding-left: 12rpx;
        }
      }
      .bill-list-cash{
        width: 180rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: right;
        color: $uni-color-primary;
        font-size: 40rpx;
        font-weight: bold;
        .bill-list-cash-symbol{
          font-size: 24rpx;
        }
      }
      .cash-icon{
        width: 100rpx;
        height: 40rpx;
        background: #fd2727;
        border-radius: 8rpx;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 35rpx;
        font-size: 24rpx;
        color: #fff;
      }
    }
  }
  .empty{
    padding-top: 120rpx;
    text-align: center;
    .empty-tips{
      font-size: 28rpx;
      color: #888;
    }
    .go-home{
      color: $uni-color-primary;
      margin-left: 12rpx;
      border-bottom: 1rpx solid $uni-color-primary;
    }
  }
</style>
